<template>
  <div class="container">
    <!-- 头 -->

    <!-- 头部logo -->
    <div class="head">
      <div class="headTop">
        <div class="headTop-hold">
          <div class="topLogo">
            <img class="logoImg" src="../../assets/image/logo.gif" alt="" />
            <p class="logoYear">2021</p>
          </div>
          <img class="titleImg" src="../../assets/image//title.png" alt="" />
          <div class="titleContent">
            基于<span class="titleNumber">43158</span>位旅行者的真实反馈评价选出
          </div>
        </div>
      </div>
    </div>

    <!-- 内容开始 -->
    <div class="wrapper">
      <img class="wrapperTop" src="../../assets/image/整体背景.png" alt="" />
      <div class="content">
        <div class="nav">
          <!-- 点击切换时更改样式  谁为true时，样式就显示在谁身上-->
          <div
            :class="(showFood ? 'active' : '') + ' navTitle1 navTitle'"
            @click="foodClick"
          >
            <span>美食之选</span>
          </div>

          <div
            :class="(showHotle ? 'active' : '') + ' navTitle2 navTitle'"
            @click="hotleClick"
          >
            <span> 酒店之选</span>
          </div>
          <div
            :class="(showPlay ? 'active' : '') + ' navTitle3 navTitle'"
            @click="playClick"
          >
            <span>玩乐之选</span>
          </div>
        </div>

        <!-- 蜂窝图 -->
        <Foodlist :foot="food" :title="title" :hotle="hotle" :play="play" />

        <!--底部 -->
        <div class="foter">
          <img src="../../assets/image/mfwzx.png" class="foterImg" />
          <h3 class="foterTitle">什么是马蜂窝旅行者之选？</h3>
          <p class="foterContent">
            马蜂窝旅游网面向中国旅行者推出的年度优选榜单。该榜单基于年度旅游大数据和亿万用户的真实旅行体验，以游记、攻略、笔记、视频
            、问答和点评等海量旅游内容为依托，精选全球值得体验的景点、酒店、餐厅，为用户提供高品质的旅游消费参考。
          </p>
        </div>
      </div>
    </div>

    <!-- 尾 -->
  </div>
</template>

<script>
import { reqgetPhoto } from "../../api/photo"; //这里导入的是一个 对象 ，所以要解构赋值，才是那个函数
import Foodlist from "../traveler/foodlist/index.vue";
// import data from "../../json/hotel.json"; //这个data 是本地的，现在换成了res

export default {
  name: "Traveler",
  components: {
    Foodlist,
  },
  data() {
    return {
      showFood: true,
      showHotle: false,
      showPlay: false,
      title: "food",
      food: [],
      hotle: [],
      play: [],
    };
  },
  mounted() {
    // 发送请求拿取数据
    reqgetPhoto().then((res) => {
      console.log(res);
      // this.food = "``````res 干什么···";
      // this.hotle = "``````res 干什么···";
      // this.play = "``````res 干什么···";
      this.food = [
        { list: res.data.hotelenjoy.data[0].list.slice(0, 4) },
        { list: res.data.hotelenjoy.data[0].list.slice(4, 7) },
        { list: res.data.hotelenjoy.data[0].list.slice(7, 11) },
      ];
      this.hotle = [
        { list: res.data.hotelenjoy.data[1].list.slice(0, 4) },
        { list: res.data.hotelenjoy.data[1].list.slice(4, 7) },
        { list: res.data.hotelenjoy.data[1].list.slice(7, 11) },
      ];
      this.play = [
        { list: res.data.hotelenjoy.data[2].list.slice(0, 4) },
        { list: res.data.hotelenjoy.data[2].list.slice(4, 7) },
        { list: res.data.hotelenjoy.data[2].list.slice(7, 11) },
      ];
    });
    //#region
    // this.food = [
    //   {
    //     list: data.data[0].list.slice(0, 4),
    //   },
    //   { list: data.data[0].list.slice(4, 7) },
    //   { list: data.data[0].list.slice(7, 11) },
    // ];

    // this.hotle = [
    //   {
    //     list: data.data[1].list.slice(0, 4),
    //   },
    //   {
    //     list: data.data[1].list.slice(4, 7),
    //   },
    //   {
    //     list: data.data[1].list.slice(7, 11),
    //   },
    // ];
    // this.play = [
    //   {
    //     list: data.data[2].list.slice(0, 4),
    //   },
    //   {
    //     list: data.data[2].list.slice(4, 7),
    //   },
    //   {
    //     list: data.data[2].list.slice(7, 11),
    //   },
    // ];
    //#endregion
  },
  methods: {
    // 绑定点击事件点击到谁为tru样式就展示在他身上
    foodClick() {
      this.showFood = true;
      this.showHotle = false;
      this.showPlay = false;
      this.title = "food";
    },
    hotleClick() {
      this.showFood = false;
      this.showHotle = true;
      this.showPlay = false;
      this.title = "hotle";
    },
    playClick() {
      this.showFood = false;
      this.showHotle = false;
      this.showPlay = true;
      this.title = "play";
    },
  },
};
</script>

<style lang="stylus" scoped>
.container {
  width: 100%;
  height: auto;
  background-color: #242323;
}

.head {
  width: 100%;
  background: url('../../assets/image/头部背景.png') no-repeat;
  background-size: 100% 100%;
  height: 600px;
  /* border: 2px solid rebeccapurple; */
  position: relative;
}

.headTop {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  /* border: 1px solid rebeccapurple; */
}

.headTop-hold {
  width: 500px;
  /* border: 2px solid rebeccapurple; */
  margin: 0 auto;
}

.topLogo {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  padding-top: 42px;
  box-sizing: border-box;
  /* border: 1px solid lawngreen; */
  text-align: center;

  p {
    margin-top: 30px;
  }
}

.logoImg {
  width: 120px;
  height: 130px;
  margin: -25px;
}

.logoYear {
  font-size: 28px;
  line-height: 30px;
  letter-spacing: 5px;
  color: #242629;
  /* padding-left:18px; */
  text-align: center;
}

.titleImg {
  width: 440px;
  height: 56px;
  margin: 0 auto 10px 20px;
}

.titleContent {
  margin: 0 auto 10px 30px;
  font-size: 20px;
  /* border: 1px solid lawngreen; */
  letter-spacing: 1px;
}

.titleNumber {
  color: #ce873f;
  font-size: 25px;
}

/* 头部样式结束 */
.wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

.wrapperTop {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.nav {
  width: 100%;
  height: 44px;
  line-height: 44px;
  display: flex;
  justify-content: center;
  color: #bdbfc2;
  font-size: 24px;
  /* border: 1px solid gold; */
  margin-bottom: 50px;
}

.nav div {
  width: 15%;
  /* border: 1px solid gold; */
  margin-left: 5%;
}

.active {
  font-weight: bold;
  color: #ffc7a0;
}

.navTitle {
  position: relative;
}

.navTitle::before {
  content: '';
  width: 133px;
  height: 25px;
  position: absolute;
  /* background: url("../../assets/image/hotels.png") no-repeat; */
  top: 0px;
  left: 50%;
  background-size: 100%;
  z-index: -1;
}

.navTitle1::before {
  background-image: url('../../assets/image/delicacies_active.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.navTitle2::before {
  background-image: url('../../assets/image/hotels.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.navTitle3::before {
  background-image: url('../../assets/image/experiences.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 底部样式 */
.foter {
  width: 736px;
  padding-top: 30px;
  margin: 60px auto;
}

.foterImg {
  width: 64px;
  height: 74px;
  margin: 0 auto;
  display: block;
}

.foterTitle {
  font-size: 20px;
  line-height: 28px;
  color: #f6f7f9;
  text-align: center;
}

.foterContent {
  font-size: 15px;
  line-height: 22px;
  color: #bdbfc2;
  text-align: left;
}
</style>